<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:c="http://java.sun.com/jsp/jstl/core">
    <body>
   
        <ui:composition template="./template.xhtml">

            <ui:define name="navigation">
                <h:form>
                    <ul>
                        <li><h:commandLink value="#{msg.restart}" action="#{lc.mc.init}"/></li>
                        <li><h:link outcome="index" value="#{msg.logout}(#{lc.name})"/></li>
                    </ul>
                </h:form>
            </ui:define>

            <ui:define name="content">
                <div id="info_area">
                    <h2>#{msg.gamestatus}</h2>
                    <table id="score" summary="Diese Tabelle zeigt den aktuellen Spielstand">
                        <tbody>
                            <tr>
                                <th class="accessibility">Label</th>
                                <th>#{msg.you}</th>
                                <th>#{msg.opponent}</th>
                            </tr>
                            <tr>
                                <th class="label">#{msg.pairs}</th>
                                <td><h:outputText id="foundpairs" value="#{lc.memoryPlayer.uncoveredMatchingPairsCount}"/></td>
                                <td><h:outputText id="foundpairs2" value="#{lc.memoryOpponent.uncoveredMatchingPairsCount}"/></td>
                            </tr>
                            <tr>
                                <th class="label">#{msg.attempts}</th>
                                <td><h:outputText id="attempts" value="#{lc.memoryPlayer.allUncoveredPairsCount}"/></td>
                                <td><h:outputText id="attempts2" value="#{lc.memoryOpponent.allUncoveredPairsCount}"/></td>
                            </tr>
                            <tr>
                                <th class="label">#{msg.time}</th>
                                <td><h:outputText id="time" value="#{lc.playTime}"/></td>
                                <td><h:outputText id="time2" value="#{lc.opponentPlayTime}"/></td>
                            </tr>
                        </tbody>
                    </table>

                    <h2>#{msg.gameinfo}</h2>
                    <table id="game_info" summary="Diese Tabelle zeigt weitere Informationen zum aktuellen Spiel">
                        <tbody>
                            <tr class="accessibility">
                                <th>Information</th>
                                <th>Wert</th>
                            </tr>
                            <tr>
                                <th>#{msg.remainingpairs}</th>
                                <td><h:outputText id="coveredpairs" value="#{lc.mc.coveredPairsCount}"/></td>
                            </tr>
                            <tr>
                                <th xml:lang="en">#{msg.theme}</th>
                                <td>
                                    <h:panelGroup id="genre">
                                        <c:if test="#{lc.mc.getGenre()=='rock'}"><h:outputText value="#{msg.rock}" /></c:if>
                                        <c:if test="#{lc.mc.getGenre()=='pop'}"><h:outputText value="#{msg.pop}" /></c:if>
                                        <c:if test="#{lc.mc.getGenre()=='alternative'}"><h:outputText value="#{msg.alternative}" /></c:if>
                                        <c:if test="#{lc.mc.getGenre()=='80s'}"><h:outputText value="#{msg.eighties}" /></c:if>
                                        <c:if test="#{lc.mc.getGenre()=='metal'}"><h:outputText value="#{msg.metal}" /></c:if>
                                        <c:if test="#{lc.mc.getGenre()=='blues'}"><h:outputText value="#{msg.blues}" /></c:if>
                                        <c:if test="#{lc.mc.getGenre()=='hip hop'}"><h:outputText value="#{msg.hiphop}"/> </c:if>
                                    </h:panelGroup>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <h:panelGroup id="artists">
                        <ui:include src="/WEB-INF/includes/topartists.xhtml"/>
                    </h:panelGroup>
                </div>
                <hr class="accessibility" />  
                    <div id="board">
                        <h2 class="accessibility">Spielbrett</h2>
                       
                        <f:view>
                            <script type="text/javascript">
                            startAjaxPoll('dynamic',1000);
                            </script>
                            <h:form id="dynamic">   
                                <h:outputText styleClass="status" value="#{msg.yourturn}" rendered="#{lc.myTurn and !lc.mc.gameOver}" />
                                <h:outputText styleClass="status" value="#{msg.player} #{lc.opponent.name} #{msg.turn}" rendered="#{!lc.myTurn and !lc.mc.gameOver}"/>
                                <div>
                                    <h:panelGroup rendered="#{lc.mc.gameOver}">
                                        <h:outputText styleClass="status" value="#{msg.gameover}" />
                                        <h:panelGroup rendered="#{lc.player.equals(lc.mc.player1)}">
                                            <h:outputText value="#{msg.your_highscore} #{lc.mc.getHighscore(lc.player)}"/><br/>
                                            <h:outputText value="#{msg.no_highscore}" rendered="#{!lc.mc.checkHighscore(lc.player)}"/><br/>
                                            <h:outputLabel styleClass="Float" for="genre" value="#{msg.genre}"/>
                                            <h:selectOneMenu id="genre" value="#{lc.mc.player1.genre}" onmouseover="stopPolling();">
                                                <f:selectItem itemValue="rock" itemLabel="#{msg.rock}"/>
                                                <f:selectItem itemValue="pop" itemLabel="#{msg.pop}"/>
                                                <f:selectItem itemValue="alternative" itemLabel="#{msg.alternative}"/>
                                                <f:selectItem itemValue="80s" itemLabel="#{msg.eighties}"/>
                                                <f:selectItem itemValue="metal" itemLabel="#{msg.metal}"/>
                                                <f:selectItem itemValue="blues" itemLabel="#{msg.blues}"/>
                                                <f:selectItem itemValue="hip hop" itemLabel="#{msg.hiphop}"/>
                                            </h:selectOneMenu>
                                            <h:commandButton value="#{msg.restart}" action="#{lc.mc.init}" onclick="startAjaxPoll('dynamic',1000);" />
                                        </h:panelGroup>
                                        <h:panelGroup rendered="#{!lc.player.equals(lc.mc.player1)}">
                                            <h:outputText value="#{msg.your_highscore} #{lc.mc.getHighscore(lc.player)}"/>
                                            <h:outputText value="#{msg.no_highscore}" rendered="#{!lc.mc.checkHighscore(lc.player)}"/><br/>
                                        </h:panelGroup>
                                    </h:panelGroup>
                                </div>
                                <table summary="Diese Tabelle stellt das Memory-Brett mit den Karten dar">
                                    <tr class="accessibility">
                                        <th>Kartenspalte 1</th>
                                        <th>Kartenspalte 2</th>
                                        <th>Kartenspalte 3</th>
                                        <th>Kartenspalte 4</th>
                                        <th>Kartenspalte 5</th>
                                    </tr>
                                    <f:ajax  render="@form :attempts :foundpairs :time :coveredpairs :attempts2 :foundpairs2 :time2 :genre :artists">
                                        <ui:repeat value="#{lc.mc.cards}" var="row" >
                                            <tr>
                                                <th class="accessibility">Kartenzeile #{lc.mc.cards.indexOf(row)+1}</th>
                                                <ui:repeat value="#{row}" var="card" >
                                                    <td class="#{card.currentState.toString().equals('UNCOVERED')?'visible_card':''}">
                                                        <h:commandLink rendered="#{lc.myTurn}" action="#{lc.mc.changeshow(card.row,card.column)}">
                                                            <h:graphicImage url="#{card.currentState.toString().equals('UNCOVERED')?card.id:lc.mc.backcardpath}" alt="card"/>
                                                        </h:commandLink>
                                                        <h:graphicImage rendered="#{!lc.myTurn}" url="#{card.currentState.toString().equals('UNCOVERED')?card.id:lc.mc.backcardpath}" alt="card"/>
                                                    </td>
                                                </ui:repeat>
                                            </tr>
                                        </ui:repeat>
                                    </f:ajax>
                                </table>
                            </h:form>
                       </f:view>
                    </div>
            </ui:define>
        </ui:composition>       
    </body>
</html>
